<template>
	<view :style="viewColor" >
		<!-- 自定义顶部背景颜色 -->
		<skeleton :show="showSkeleton" :isNodes="isNodes" ref="skeleton" loading="chiaroscuro" selector="skeleton"
			bgcolor="#FFF"></skeleton>
		<view class=" skeleton"  :style="{visibility: showSkeleton ? 'hidden' : 'visible'}">
		
			<view class="bg-w">
				
			</view>
			<view class="m_booking" v-if="planInfo">
				<view class="m_booking_content">
					<view class="m_booking_content_blue">
						<view class="m_booking_content_inner">
							
							<view class="bus-detail-header">
								<view class="header-row info-line">
									<view class="info-tag">	出发	</view>
									<view class="">{{planInfo.date_md}}  {{planInfo.date_week}}</view>
									<view class="flex1"></view>
									<view class="iconfont icon-ic_clock2 mr-5"></view>
									<view class="">	约{{convertMinutesToHours(storeInfo.duration)}}小时</view>
								</view>
								<view class="header-row  display-flex-align-center header-section">
									<view class="flex1">
										<view class="header-row station-row">
											<view class="dot "></view>
											<view class="time">	{{planInfo.lineStops[0].departure_time}}</view>
											<view class="flex1">{{planInfo.lineStops[0].stop.name}}</view>
										</view>
										<view class="header-row station-row">
											<view class="dot arr"></view>
											<view class="time">	{{planInfo.lineStops[planInfo.lineStops.length-1].departure_time}}</view>
											<view class="flex1">{{planInfo.lineStops[planInfo.lineStops.length-1].stop.name}}</view>
										</view>
									</view>
									<view @click="openLoc" class="show-station-btn btn">
										<image :src="`${domain}/static/images/loc.png`" style="height: 22px;width: 24px;"></image>
									    <view>站点详情</view>
									</view>
								</view>
							    <view class="dashed_line mr-10 ml-10 mt-5 mb-10"> </view> 
								<view @click="openBuyDetail" class="header-row rule-line ml-10 mr-10 " style="padding-bottom: 10px;">
									<view class="">
										<view class="header-row" v-if="storeInfo.refund_switch&&storeInfo.productRefundRate&&storeInfo.productRefundRate.length" >
											<view class="iconfont icon-ic-complete mr-10 color-green" ></view>
											<view v-if="storeInfo.productRefundRate[0].refund_time&&storeInfo.productRefundRate[0].value<100.00" class="rule-list">
												发车前{{convertMinutesToTimeAgo(storeInfo.productRefundRate[0].refund_time)}}可在线退票 
											</view>
											<view v-else class="rule-list">
												不可在线退票，请联系客服咨询
											</view>
										</view>
										<view class="header-row" v-else >
											<view class="iconfont icon-ic_close mr-10 color-red" ></view>
											<view class="rule-list">
												不可在线退票，请联系客服咨询
											</view>
										</view>
										<view class="header-row mt-5" v-if="planInfo.is_return_trip" >
											<view class="iconfont icon-ic-complete mr-10 color-green" ></view>
											<view class="rule-list" style="color: #0086F6;">
												含往返车票
											</view>
										</view>
										<view class="header-row mt-5" v-if="planInfo.plan_type==3&&planInfo.is_must==0" >
											<view class="iconfont icon-ic-complete mr-10 color-green" ></view>
											<view class="rule-list ">
												需预约满{{planInfo.lowest_num}}人发车，如预约失败，系统自动全额退款
											</view>
										</view>
										<view class="header-row mt-5" v-if="planInfo.plan_type==3&&planInfo.is_must==1" >
											<view class="iconfont icon-ic-complete mr-10 color-green" ></view>
											<view class="rule-list ">
												已众筹拼车成功，不允许在线退票
											</view>
										</view>
									</view>
									<view class="product-desc">
										购票须知<text class="iconfont icon-ic_right text-10 ml-2"></text>
									</view>
								</view>
							</view>
							
						
						</view>
						
					</view>
					
				</view>
				
			</view>
			
		
			
			<view  v-if="planInfo&&planInfo.lineStops.length>2" class="mt-10 mb-10">
				<view class="m_sku m_sku_ctrip  m_sku_book ">
				
					<view class="m_sku_wrap" >
						<view class="m_sku_inner ">
							<view class="m_sku_content ">
								<view class="pd-lr10 m_select_quantity_limit">
									<text class="ft-w700 text-18 text-black">选择上下车点</text>
								</view>
								<view  class="pd-10 display-flex display-flex-align-center">
									<view class="display-flex-column" style="width: 100%;">
										
										<view class="row-center skeleton-rect" style="height: 44px;">
											<view class="">
												<view class="station_dot station_dot_start">
												</view>
											</view>
											<view class="od-item" style="width: 100%;">
												<picker @change="selctOnStop" :value="on_stop_index" :range="on_stop_arr" range-key="stop_name">
													<view v-if="on_stop_name" class="uni-input">{{on_stop_arr[on_stop_index].stop.name}}</view>
													<view v-else class="" style="color: #c9c9c9;">请选择上车点	</view>
												</picker>
											</view>
											<view class="iconfont icon-ic_right" style="margin-left: auto;margin-right: 5px;color: #9e9e9e;"></view>
										</view>
										<view class="separation-line" style="margin-left:32px"></view>
										
										<view class="row-center" style="height: 44px;" >
											<view class="">
												<view class="station_dot station_dot_end">
												</view>
											</view>
											<view class="od-item" style="width: 100%">
												<picker @change="selctOffStop" :value="off_stop_index" :range="off_stop_arr" range-key="stop_name">
													<view v-if="off_stop_name" class="uni-input">{{off_stop_arr[off_stop_index].stop.name}}</view>
													<view v-else class="" style="color: #c9c9c9;">请选择下车点	</view>
												</picker>
											</view>
											<view class="iconfont icon-ic_right" style="margin-left: auto;margin-right: 5px;color: #9e9e9e;"></view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>

				</view>
				
			</view>
						
			
			<view  v-if="linePlanMeal" class="mt-10 mb-10">
				<view class="m_sku m_sku_ctrip  m_sku_book ">
				
					<view class="m_sku_wrap" v-if="linePlanMeal.adult_price > 0">
						<view class="m_sku_inner ">
							<view class="m_sku_content ">
								<view class="pd-lr10 m_select_quantity_limit">
									<text class="ft-w700 text-18 text-black">预订选择</text>
								</view>
								<view v-if="linePlanMeal.adult_price" class="pd-10 display-flex display-flex-align-center">
									<view class="source_content flex-1">
										<text class="ft-w700 text-black mr-2">{{linePlanMeal.title}}</text>
<!-- 										<text class="text-12 color-102">{{filterSkuName('成人')}}</text> -->
									</view>
									<view class="ml-20 choice_options_wrapper display-flex display-flex-align-center">
										<view class="text-14 color-f60 ft-w700 mr-5" style="height: 60rpx;line-height: 60rpx;">
											<text>￥{{formatNumber(linePlanMeal.adult_price)}}</text>
										</view>
										<number-box 
										:min="1" 
										:max="stock" 
										:value="cart.adult_num" 
										:index="1" 
										:isPlusDis="(priceDate.stock==cart.cart_num)"
										@change="changeSkuNum"></number-box>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view v-else class="h-100 display-flex display-flex-align-center display-flex-justify-center pd-20">
						<view class="color-red text-20">
							暂无销售属性可售卖!
						</view>
					</view>
				</view>
				
			</view>
			
			<view  class="column skeleton-rect bg-white bus-kn" >
				<view class="pd-10">
					<text class="text-16 text-black">出行信息</text> 
					<text class="ml-5 text-14 color-66" >需要选择 <text>{{passengerNum}}</text>位乘客</text>
				</view>
				<view @click.stop="showAddPassenger=true" v-if="passengerTemp&&!passengerTemp.length" class="blue-button">
					<view>
						<text class="iconfont icon-ic_increase mr-5" ></text>
						<text>添加乘客</text>
					</view>
				</view>
			
				<view v-else-if="passengerTemp.length&&skuType == 1"  style="padding-right: 10px;">
					<view class="" style="display: flex;flex-flow: wrap;">
						<view style="width: 25%;padding-left: 10px;padding-top: 10px;"  v-for="(item,index) in passengerTemp" :key="item.id">
							<view @click="selectPassengerHandel(index,item.check)"  :class="item.check?'in-active':'no-active'" style="">
								<view style="">
									<view style="max-width: 100px;;" class="text-ellipsis">{{item.name}}</view>
									<view v-if="item.check" class="gou">
										<text class="iconfont icon-ic_complete text-10 color-white" ></text>
									</view>
									<text style="display: none;">{{flag}}</text>
								</view>
							</view>
						</view>
						<view class=""  style="width: 25%;padding-left: 10px;padding-top: 10px;" >
							<view  @click="selectPaShow(1,adultList)"  class="no-active" style="color: #0086F6;" >
								<!-- <text class="iconfont icon-ic_picture text-14 mr-2" ></text> -->
								<text class="text-14">新增/选择</text>
							</view>
						</view>
					</view>
					<view class="" style="padding-left: 10px;" v-if="adultList.length">
						<view class="flex1 mr-10" >
							<view class="mt-10 mb-10" v-for="(pa,indexPa) in adultList" :style="indexPa!=(adultList.length-1)?'border-bottom: .5px solid #eee;':''" >
								<view class="row-center" style="margin:15px 0;">
									<text @click.stop="delectPassenger(1,indexPa)" class="iconfont icon-ic_close" style="color: #909090;margin: 0 10px 0 5px;"></text>
									<text style="font-size: 14px;color: #000000;font-weight: 600;width: 90px;">乘客{{indexPa+1}}</text>
									<text style="font-size: 14px;color: #000000;font-weight: 600;width: 90px;">{{pa.name}}</text>
									<!-- <text style="color: #909090;font-size: 12px;margin: 0 5px;margin-right: 32px;">{{pa.id_card.substr(0,4) + "**********" + pa.id_card.substr(14),}}</text> -->
									<text style="color: #909090;font-size: 12px;margin: 0 5px;margin-right: 32px;">{{pa.id_card}}</text>
							
								</view>
							</view>
							
						</view>
					</view>
				</view>
				<view v-else-if="passengerList.length&&skuType == 2"  class=" skeleton-rect " style="margin: 10px;">
					<text style="display: none;">{{flag}}</text>
					<view class="" v-if="cart.adult_num > 0">
						<view  @click="selectPaShow(1,adultList)" class="display-flex display-flex-align-center " style="border-bottom: .5px solid #eee;padding-bottom: 15px;padding-top: 15px;">
							<view class=" ft-w700 width-100">
								成人
							</view>
							<view v-if="adultList.length==0" class="color-bbb flex1 " style="">
								需要选择{{cart.adult_num}}名成人
							</view>
							<view class="flex1 mr-10" v-else>
								<view class="mt-10 mb-10" v-for="(pa,indexPa) in adultList" :style="indexPa!=(adultList.length-1)?'border-bottom: .5px solid #eee;':''" >
									<view class="row-center" style="margin:15px 0;">
										<text @click.stop="delectPassenger(1,indexPa)" class="iconfont icon-ic_close" style="color: #909090;margin: 0 10px 0 5px;"></text>
										<text style="font-size: 14px;color: #000000;font-weight: 600;width: 90px;">{{pa.name}}</text>
										<text style="color: #909090;font-size: 12px;margin: 0 5px;margin-right: 32px;">{{pa.id_card.substr(0,4) + "**********" + pa.id_card.substr(14),}}</text>
					
									</view>
								</view>
								<view class="color-bbb" v-if="cart.adult_num - adultList.length !=0" style="border-top: .5px solid #eee; padding: 10px 0;">
									还需要选择{{cart.adult_num- adultList.length}}名成人
								</view>
							</view>
							<view class="ml-auto">
								<text class="iconfont icon-ic_right color-999"></text>
							</view>
							
						</view>
					</view>
					<view class="" v-if="cart.child_num > 0">
						<view  @click="selectPaShow(2,childList)" class="display-flex display-flex-align-center " style="border-bottom: .5px solid #eee;padding-bottom: 15px;padding-top: 15px;">
							<view class=" ft-w700 width-100">
								儿童
							</view>
							<view v-if="childList.length==0" class="color-bbb flex1 " style="">
								需要选择{{cart.child_num}}名儿童
							</view>
							<view class="flex1 mr-10" v-else>
								<view class="mt-10 mb-10" v-for="(pa,indexPa) in childList" :style="indexPa!=(childList.length-1)?'border-bottom: .5px solid #eee;':''" >
									<view class="row-center" style="margin:15px 0;">
										<text @click.stop="delectPassenger(2,indexPa)" class="iconfont icon-ic_close" style="color: #909090;margin: 0 10px 0 5px;"></text>
										<text style="font-size: 14px;color: #000000;font-weight: 600;width: 90px;">{{pa.name}}</text>
										<text style="color: #909090;font-size: 12px;margin: 0 5px;margin-right: 32px;">{{pa.id_card.substr(0,4) + "**********" + pa.id_card.substr(14),}}</text>
					
									</view>
								</view>
								<view class="color-bbb" v-if="cart.child_num - childList.length !=0" style="border-top: .5px solid #eee; padding: 10px 0;">
									还需要选择{{cart.child_num - childList.length}}名儿童
								</view>
							</view>
							<view class="ml-auto">
								<text class="iconfont icon-ic_right color-999"></text>
							</view>
							
						</view>
					</view>
				</view>
				
				
				<view v-if="skuType==1" class="dashed_line mr-10 ml-10 mt-10"> </view>
				<view class="display-flex display-flex-align-center pd-10" >
				   <text class="text-16 color-66 mr-15" >联系电话</text>
				   <input class="text-black" v-model="orderPhone" type="number" maxlength="11" />
			    </view>
			
			</view>
			
			<view class="form-item item-txtarea">
				<text class="label">备注信息</text>
				<view class="txtarea">
					<textarea  	@input='bindHideKeyboard' value="" name="mark" placeholder='选填备注信息'
					v-model="msgObj[storeInfo.mer_id]" /></view>
			</view>
			
			<view v-if="platformCoupon.length > 0" class='bgw acea-row row-between-wrapper  mr-lr10 br-8'>
				<view>平台优惠券</view>
				<block v-if="platformCoupon.length > 0">
					<view class='discount money' @tap='couponTap2(platformCoupon,0)'>
						<text v-if="total_platform_coupon_price>0">优惠¥{{total_platform_coupon_price}}</text>
						<text v-else>暂未选择优惠券</text>
						<text class='iconfont icon-ic_right'></text>
					</view>
				</block>
				<block v-else>
					<view class='discount'>暂无优惠券</view>
				</block>
			</view>
			
			<view v-if="mer_order &&mer_order.coupon.length>0" class='bgw acea-row row-between-wrapper mr-lr10 br-8'>
				<view>店铺优惠券</view>
				<block v-if="mer_order.coupon.length>0">
					<view class='discount' @tap='couponTap(mer_order)'>
						<text v-if="mer_order.order.coupon_price>0">优惠¥{{mer_order.order.coupon_price}}</text>
						<text v-else>暂未选择优惠券</text>
						<text class='iconfont icon-ic_right'></text>
					</view>
				</block>
				<block v-else>
					<view class='discount'>暂无优惠券</view>
				</block>
			</view>
			<!-- <view class="item acea-row row-between-wrapper">
				<checkbox-group class="checkgroup" @change='changeIsAgree'>
					<text class="iconfont icon-icon_question" style="margin-left: 0;margin-right:8px;"></text>
					<text @click="getPresellAgree">我已同意定金不退等预售协议</text>
					<checkbox class="checkbox" :checked="isAgree ? true : false" />
				</checkbox-group>
			</view> -->
			<view style="height: 100px;">
				
			</view>
			<view  class='footer acea-row row-between-wrapper'>
				<view class="footer_count">
					<view class="acea-row">
						<view>合计:</view>
						<view class='pColor'>
							<priceFormat :price="totalPrice" weight intSize="48" floatSize="32" labelSize="32"></priceFormat>
						</view>
					</view>
					<view class="coupon_price" v-if="couponData.total_coupon > 0">
						优惠:¥ {{couponData.total_coupon}}
						<text @click="openDiscount">优惠明细</text>
					</view>
				</view>
				<view class='settlement' style='z-index:100'
					@tap="SubOrder">立即结算</view>
			</view>
		</view>
		
	    <uni-popup ref="locRef" type="bottom" :safe-area="true"  background-color="#fff">
	    	 <view class="bg-white br-8" style="height: 300px;">
	    	 	<view class="popup-header"> 
	    	 		<view class="popup-title">
	    	 			站点详情
	    	 		</view>
	    	 		<view @click="locColse" class="popup-close1 iconfont icon-ic_close text-18">	</view>
	    	 	</view>
	    		<view class="locpop mt-10" v-if="planInfo">
	    			<scroll-view scroll-y="true" style="height:270px;padding-bottom: 30px;">
	    				<view  @click="lookStation(item.stop)" v-for="(item,index) in planInfo.lineStops" :key="index" class="display-flex-column" style="align-items: flex-start;">
	    					<view class="display-flex-column" style="margin-left: 10%;">
	    						<view class="row-center" style="justify-content: center;">
	    							<text  class="ft-w700 " style="width: 40px;">{{item.departure_time}}</text>
	    							<view class="dot-unipop" :style="(item.stop_type==2)?'background-color: #f5190a;':'background-color: #00b87a;'"></view>
	    							<text   class="ft-w600 ">{{item.stop.name}}</text>
	    						</view>
	    						<view v-if="index!=(planInfo.lineStops.length-1)" class="shu-fg" style="margin-left: 53px;"></view>
	    					</view>
	    						
	    				</view>
	    			</scroll-view>
	    		</view>
	    	 </view>
	    </uni-popup>
	    <uni-popup ref="buyDetailRef" type="bottom" :safe-area="true"  background-color="#fff">
			<view class="bg-white br-8" :style="'height:'+windowHeight*0.82+'px' ">
				<view class="popup-header"> 
					<view class="popup-title">
						购买须知
					</view>
					<view @click="closeBuyDetail" class="popup-close1 iconfont icon-ic_close text-18"></view>
				</view>
				<view class="">
					<view class="header-tab-box" style="margin: 0 70px;">
						<view class="header-tab-item " @click="changeNav(indexv)" v-for="(nav ,indexv) in navList" :key="indexv">
							<text>{{nav}}</text>
							<view v-if="indexv == navActive" class="header-tab-barline"></view>
						</view>
					</view>
				</view>
				<view class=" mt-10 ml-10 mr-10" v-if="planInfo">
					<scroll-view v-if="navActive == 0" :scroll-y="true"  :style="'height:'+windowHeight*0.8+'px' ">
						<view class="">
							<view class="tag-title">
							  车次信息
							</view>
							<!-- 去程信息 -->
							<view class="bus-detail-header in-desc-header-container">
								<view class="header-row info-line" style="margin-top: -4px;"> 
									<view class="info-tag">	{{planInfo.is_return_trip?'去程':'出发'}}	</view>
									<view class="">{{planInfo.date_md}}  {{planInfo.date_week}}</view>
									<view class="flex1"></view>
									<view class="iconfont icon-ic_clock2 mr-5"></view>
									<view class="">	约{{convertMinutesToHours(storeInfo.duration)}}小时</view>
								</view>
								<view class="header-row  display-flex-align-center header-section mb-10">
									<view class="flex1">
										<view class="header-row station-row">
											<view class="dot "></view>
											<view class="time">	{{planInfo.lineStops[0].departure_time}}</view>
											<view class="flex1">
												<view class="">
													{{planInfo.lineStops[0].stop.name}}
												</view>
												<view v-if="planInfo.lineStops[0].stop.remark" class="station-text">
													{{planInfo.lineStops[0].stop.remark}}
												</view>
											</view>
											
										</view>
										<view class="header-row station-row">
											<view class="dot arr"></view>
											<view class="time">	{{planInfo.lineStops[planInfo.lineStops.length-1].departure_time}}</view>
											<view class="flex1">
												<view class="">
													{{planInfo.lineStops[planInfo.lineStops.length-1].stop.name}}
												</view>
												<view v-if="planInfo.lineStops[planInfo.lineStops.length-1].stop.remark" class="station-text">
													{{planInfo.lineStops[planInfo.lineStops.length-1].stop.remark}}
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
							<!-- 去程信息 -->
							<!-- 返程信息 -->
							<view v-if="planInfo.is_return_trip" class="bus-detail-header in-desc-header-container">
								<view class="header-row info-line" style="margin-top: -4px;"> 
									<view class="info-tag">	返程	</view>
									<view v-if="planInfo.return_trip_date" class="">{{planInfo.return_trip_date_md}}  {{planInfo.return_trip_date_week}}</view>
									<view v-else class="color-blue">
										返程时间待定，具体时间请咨询客服
									</view>
								</view>
								<view v-if="planInfo.return_trip_date"  class="header-row  display-flex-align-center header-section mb-10">
									<view class="flex1">
										<view class="header-row station-row">
											<view class="dot "></view>
											<view class="time">	{{planInfo.return_trip_date_dptime}}</view>
											<view class="flex1">
												<view class="">
													{{planInfo.lineStops[planInfo.lineStops.length-1].stop.name}}
												</view>
												<view v-if="planInfo.lineStops[planInfo.lineStops.length-1].stop.remark" class="station-text">
													{{planInfo.lineStops[planInfo.lineStops.length-1].stop.remark}}
												</view>
											</view>
											
										</view>
										<view class="header-row station-row">
											<view class="dot arr"></view>
											<view class="time">	{{addMinutesToTime(planInfo.return_trip_date_dptime,storeInfo.duration)}}</view>
											<view class="flex1">
												<view class="">
													{{planInfo.lineStops[0].stop.name}}
												</view>
												<view v-if="planInfo.lineStops[0].stop.remark" class="station-text">
													{{planInfo.lineStops[0].stop.remark}}
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
							<!-- 返程信息 -->
						</view>
						<view v-if="planInfo.content.content" class="">
							<view class="tag-title mb-10">
							  产品说明
							</view>
							<view class="tag-content" v-html="planInfo.content.content"></view>
						</view>
						<view style="height: 120px;"></view>
						
					</scroll-view>
					<scroll-view v-if="navActive == 1" :scroll-y="true"  :style="'height:'+windowHeight*0.8+'px' ">
						<view class="">
							<view class="tag-title">
							  退改规则
							</view>
							<view class="tag-content">
								1.本产品暂不支持线上改签功能
							</view>
							<view class="tag-content">
								2.因我司原因造成无法出行，我司将进行全额退款。
							</view>
							<view class="tag-content">
								3.因乘客个人原因造成无法出行的，按以下规则处理：
							</view>
							<view class="mt-10 mb-10">
								<view class="cost-table">
									<!-- 1儿童限制2年龄限制3人群限制 -->
									<view class="cost-table-td">
										<view class="cost-table-td-left color-66 ft-w500" style="width: 200px;background: #efeff4;">
											取消时间
										</view>
										<view class="cost-table-td-right color-66 ft-w500" style="background: #efeff4;">
											损失费用
										</view>
									</view>
									<view class="cost-table-td" v-for="(refundRate,indexl) in storeInfo.productRefundRate" :key="indexl">
										<view class="cost-table-td-left ft-w500" style="width: 200px">
											{{filterRefund(refundRate)}}
										</view>
										<view class="cost-table-td-right color-66">
											{{refundRate.value}}%
										</view>
									</view>
								</view>
							</view>
							<view class="tag-content">
								4.若产生退款，将在1-7个工作日内原渠道退回。
							</view>
							<view class="tag-content">
								5.若班次类型为预约班，如预约失败，系统自动全额退款。
							</view>
						</view>
						
						<view  class=""  v-if="storeInfo.productRefundRule.content">
							<view class="tag-title">
							  退改特别说明：
							</view>
							<view  v-if="storeInfo.productRefundRule.content" class="tag-content" v-html="storeInfo.productRefundRule.content"></view>
						</view>
						
						<view style="height: 120px;"></view>
						
					</scroll-view>
					
				</view>
			</view>
	    </uni-popup>
	   	
		
		<uni-popup :safe-area="true" ref="buyKnowRef" type="center" mask-background-color="rgba(0,0,0,0.8)" :is-mask-click="false">
			<view class="bg-white br-8" style="margin: 0 40px;" >
				<view class="popup-header"> 
					<view class="popup-title">
						购买须知
					</view>
				</view>

				<view class=" ml-20 mr-20" v-if="planInfo">
					<scroll-view  :scroll-y="true"  :style="'height:'+windowHeight*0.45+'px' ">
						<view class="">

							<view class="tag-content">
								1.本产品暂不支持线上改签功能
							</view>
							<view class="tag-content">
								2.因我司原因造成无法出行，我司将进行全额退款。
							</view>
							<view class="tag-content">
								3.因乘客个人原因造成无法出行的，按以下规则处理：
							</view>
							<view class="mt-10 mb-10">
								<view class="cost-table">
									<!-- 1儿童限制2年龄限制3人群限制 -->
									<view class="cost-table-td">
										<view class="cost-table-td-left color-66 ft-w500" style="width: 200px;background: #efeff4;">
											取消时间
										</view>
										<view class="cost-table-td-right color-66 ft-w500" style="background: #efeff4;">
											损失费用
										</view>
									</view>
									<view class="cost-table-td" v-for="(refundRate,indexl) in storeInfo.productRefundRate" :key="indexl">
										<view class="cost-table-td-left ft-w500" style="width: 200px">
											{{filterRefund(refundRate)}}
										</view>
										<view class="cost-table-td-right color-66">
											{{refundRate.value}}%
										</view>
									</view>
								</view>
							</view>
							<view class="tag-content">
								4.若产生退款，将在1-7个工作日内原渠道退回。
							</view>
							<view class="tag-content">
								5.若班次类型为预约班，如预约失败，系统自动全额退款。
							</view>
						</view>
						
						<view  class=""  v-if="storeInfo.productRefundRule.content">
							<view class="tag-title">
							  退改特别说明：
							</view>
							<view  v-if="storeInfo.productRefundRule.content" class="tag-content" v-html="storeInfo.productRefundRule.content"></view>
						</view>
						
						<view style="height: 120px;"></view>
						
					</scroll-view>
					
				</view>
				<view class="display-flex display-flex-justify-center">
					<view v-if="!isdown" class="mini-buy-button" style="opacity: 0.6;">
						<view class="display-flex display-flex-justify-center display-flex-align-center">
							<view class="">
								我知道了
							</view>
							(<uni-countdown  :font-size="16" @timeup="timeup"	 color="#ffffff" :showDay="false" :showHour="false" :showMinute="false" :second="6"></uni-countdown>)
							
						</view>
					</view>
					<view v-if="isdown" class="mini-buy-button"  @click="closeBuyKnow">
						<view class="display-flex display-flex-justify-center display-flex-align-center">
							<view class="">
								我知道了
							</view>
							
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		
		
		<uni-popup ref="bookingRef" type="center" :safe-area="true">
			<view class="bg-white br-8" style="height:350px;margin:0 30px">
				<view class="popup-header"> 
					<view class="popup-title">
						预约班提醒
					</view>
					<view @click="closeBooking" class="popup-close1 iconfont icon-ic_close text-18"></view>
				</view>
				<view class="" style="padding: 0 15px;">
					<view class="row-center" style="margin: 15px; align-items: flex-start;">
						<text>1、</text><text>此班次为预约班次，需预约人数达到规定人数（通常15人）视为发车成功</text>
					</view>
					<view class="row-center" style="margin: 15px; align-items: flex-start;">
						<text>2、</text><text>当预约人数未达到规定人数即为发车失败，系统会自动为您取消订单</text>
					</view>
					<view class="row-center" style="margin: 15px; align-items: flex-start;">
						<text>3、</text><text>当发车成功时，系统会发送预约成功短信</text>
					</view>
					<view class="row-center" style="margin:15px; align-items: flex-start;">
						<text>4、</text><text>禁止携带宠物上车</text>
					</view>
					<view class="row-center" style="margin: 15px; align-items: flex-start;">
						<text>5、</text><text>禁止携带易燃易爆等违禁物品上车</text>
					</view>
				</view>
				<view class="display-flex display-flex-justify-center">
					<view class="mini-blue-button"  @click="closeBooking">
						我知道了
					</view>
				</view>
			</view>
		</uni-popup>
	
	
	
	
		<uni-popup ref="rollingRef" type="center" :safe-area="true">
			<view class="bg-white br-8" style="height:300px;margin:0 30px">
				<view class="popup-header"> 
					<view class="popup-title">
						流水班提醒
					</view>
					<view @click="closeRolling" class="popup-close1 iconfont icon-ic_close text-18"></view>
				</view>
				<view class="" style="padding: 0 15px;">
					<view class="row-center" style="margin: 15px; align-items: flex-start;">
						<text>1、</text><text>此班次是流水班次，发车形式为滚动发车</text>
					</view>
					<view class="row-center" style="margin: 15px; align-items: flex-start;">
						<text>2、</text><text>请前往线路起始点乘车，以防误车</text>
					</view>
					<view class="row-center" style="margin:15px; align-items: flex-start;">
						<text>3、</text><text>禁止携带宠物上车</text>
					</view>
					<view class="row-center" style="margin: 15px; align-items: flex-start;">
						<text>4、</text><text>禁止携带易燃易爆等违禁物品上车</text>
					</view>
				</view>
				<view class="display-flex display-flex-justify-center">
					<view class="mini-blue-button"  @click="closeRolling">
						我知道了
					</view>
				</view>
			</view>
		</uni-popup>
		<block v-if="coupon.status">
			<couponListWindow :coupon='coupon' :couponTitle="plantCoupon ? '平台优惠券' : '优惠券'" @ChangCouponsClose="ChangCouponsClose" @getCoupon="getCoupon"
				:openType='openType' :coupon_amount='coupon_amount'
				:coupon_number='coupon_number'></couponListWindow>
		</block>
		<discountDetails :isShowDiscount="isShowDiscount" @close="closeDiscount" :couponData="couponData"></discountDetails>
        <select-passenger
             v-if="passengerList.length"
             ref="selectPassenger"
             @editPassenger="editPa" 
            :passengerNum="skuPaNum"
             :display="showSelectPassenger"
        	 :skuIndex="skuIndex"
            @addPa="addPa"
            @changePassenger="changePassenger" 
            @changeClose="showSelectPassenger=false" 
            :list="passengerList"
        	:selectList="selectList"
           ></select-passenger>
		<add-passenger  :display="showAddPassenger" :passenger="passenger"  @changeClose="closeAddPassenger"></add-passenger>
			
	</view>
</template>
<script>

	let app = getApp();
	let sysHeight = uni.getSystemInfoSync().statusBarHeight ;
	let windowHeight = uni.getSystemInfoSync().windowHeight ;
	import { openTourPaySuccessSubscribe } from '@/utils/SubscribeMessage.js';
	
	import { getPlantAndStoreCoupon } from '@/api/api.js';
	import {
		orderConfirm,
		getTourOrderConfirm,
		getCouponsOrderPrice,
		tourCreateOrder,
		createOrder,
		tourCartChange
	} from '@/api/order.js';
	import {
		getUserInfo,
		getAgreementApi,
		getPassengerList
	} from '@/api/user.js';
   import {
		getLinePlanDetail,
	} from '@/api/bus.js';
	import couponListWindow from '../components/orderCoupon';
    import numberBox from '@/components/number-box/index.vue';

	import { mapGetters } from "vuex";
	import { toLogin } from '@/libs/login.js';
	import { configMap } from '@/utils';
	import { HTTP_REQUEST_URL } from '@/config/app';
    import selectPassenger from '../components/selectPassenger/index.vue';
	import addPassenger from '../components/addPassenger/index.vue';
	import discountDetails from '../components/discountDetails/index.vue';
	export default {
		components: {
			couponListWindow,
			numberBox,
			selectPassenger,
			addPassenger,
			discountDetails

			
		},
		filters: {
			
		},
		data() {
			return {
				init: false,
				domain: HTTP_REQUEST_URL,	
				cartId: '', //购物车id
				line_plan_id: '',
				product_id: '',
				selectDay: '',
				storeInfo: '',
				sysHeight: sysHeight,
				windowHeight: windowHeight,
				openType: 1, //优惠券打开方式 1=使用
				active: 0, //支付方式切换
				orderPay: false,
				payType: 'weixin', //支付方式
				coupon: {
					status: false,
					list: [],
					statusTile: '立即使用'
				}, //优惠券组件
				plantCoupon: false,
				couponIndex: 0, //选择商铺优惠券索引
				subCoupon: {}, //提交订单使用的优惠券
				toPay: false, //修复进入支付时页面隐藏从新刷新页面
				coupon_number: 0,
				store_coupon_number: 0,
				coupon_amount: 0,
				store_coupon_amount: 0,
				plant_coupon_amount: 0,
				passengerList: [],
				showSelectPassenger: false,
				showAddPassenger: false,
				userInfo: '',
				orderPhone: '',
				flag: 0,
				passenger: {},
				order_type: 0,
				enabledPlatformCoupon: true,
				platformCoupon: [],
				storeCoupon: [],
				total_platform_coupon_price: 0,
				totalPrice: 0,
				couponData: {},
				showSkeleton: true, //骨架屏显示隐藏
				cartInfo: [],
				integral_count: '',
				integral_price: 0, //积分抵扣金额
				open_integral: 0,
				use_integral: '',
				mer_order: '',
				isShowDiscount: false,
				passengerNum: 0,
				isLoading: true,
				msgObj: {},
				take: [],
				invoice: {
					invoice: false,
					mer_id: 0,
					add: true
				}, //发票组件
				invoiceData: {}, // 发票数据
				extend: {},
				post: {},
				skuList: [],
				busTitle: '',
				planInfo: '',
				navList: ['产品说明', '退改须知'],
				navActive: 0,
				skuIndex: 0,
				skuPaNum: 0,
				passengerTemp: [],
				selectList: [], //已经选择的属性
				skuType: 1,
				priceDate: '',
				linePlanMeal: '',
				cart: '',
				stock: 10,
				adultList: [],
				childList: [],
				isdown: false,
				on_stop_arr:[],
				off_stop_arr:[],
				on_stop_id: '',
				off_stop_id: '',
				on_stop_name: '',
				off_stop_name: '',
				on_stop_index: 0,
				off_stop_index: 0,
			};
		},
		computed: {
			...mapGetters(['isLogin','viewColor']),
			...configMap(['hide_mer_status', 'alipay_open', 'yue_pay_status']),
		},

		onReady() {
		},
		mounted: function() {
		},
		watch: {
			'cart.adult_num':{
				handler(nVal,oVal){
					if(nVal){
						this.watchAdultchange()
					}
				},
				immediate: true,
				deep:true
			},
			'cart.child_num':{
				handler(nVal,oVal){
					if(nVal){
						this.watchChildchange()
					}
				},
				immediate: true,
				deep:true
			}
		},
		
		onLoad: function(options) {
			
			// #ifdef H5
			this.from = this.$wechat.isWeixin() ? 'weixin' : 'h5'
			// #endif
			// #ifdef MP
			this.from = 'routine'
			// #endif
			// #ifdef APP-PLUS
			this.from = 'weixin'
			// #endif
			if (!options.cartId &&!options.product_id&&!options.line_plan_id&&! options.selectDay) return this.$util.Tips({
				title: '请选择要购买的班次'
			}, {
				tab: 3,
				url: 1
			});
			this.cartId = options.cartId;
			this.product_id = options.product_id;
			this.selectDay = options.selectDay;
			this.line_plan_id = options.line_plan_id;
			if (!this.isLogin) {
				toLogin()
			}
			if (this.payType == 'weixin') {
				this.payType = this.from
			}
			let _this = this
			this.textareaStatus = true;
			if (this.isLogin && this.toPay == false && !this.orderPay) {
				this.$nextTick(function() {
					
					this.getConfirm();
					this.getGoodsDetails()
					this.getUserInfo();
					this.initPassengerList();
					this.init = true;
				})
			}
			
		

		},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {
			let that = this;
			if (this.isLogin && this.init == true) {
				this.$nextTick(function() {
					this.getConfirm();
					this.getGoodsDetails()
					this.getUserInfo();
					this.initPassengerList();
				})
			}

		},
		methods: {
			
			bindHideKeyboard: function(e) {
				this.mark = e.detail.value;
			},
			timeup(){
				this.isdown = true;
			},
			// 获取个人信息
			getUserInfo() {
				getUserInfo().then(res => {
					this.userInfo = res.data;
					this.orderPhone = this.userInfo.phone;
				})
			},
			getConfirm: function() {
				let that = this;
				uni.showLoading({
					title: '',
					mask: true
				});
				this.isLoading = true;
				getTourOrderConfirm({
					cart_id: that.cartId.split(","),
					takes: that.take,
					use_coupon: that.subCoupon,
					use_integral: that.use_integral
				}).then(res => {
					
					// 默认选中
					that.is_take = false
					res.data.order.forEach(el => {
						if(el.order.isTake == 1)that.is_take = true
						el.isTake = 0
						that.subCoupon[el.mer_id] = []
						el.coupon.forEach(coupon => {
							if (coupon.checked) {
								that.subCoupon[el.mer_id].push(coupon.coupon_user_id)
							}
						})
					})	
					that.subCoupon['0'] = []
					if(res.data.platformCoupon.length > 0){
						res.data.platformCoupon.forEach(el => {
							if (el.checked) {
								that.subCoupon[el.mer_id] = []
								that.subCoupon[el.mer_id].push(el.coupon_user_id)
							}
						})
					}
					that.$set(that.coupon, "coupon", that.plantCoupon ? res.data.platformCoupon : res.data.order[0].coupon);
					that.$set(that, "store_coupon_number",  res.data.order[that.couponIndex].order.useCouponIds.length);
					that.$set(that, "coupon_number", that.plantCoupon ? that.subCoupon['0'].length : that.store_coupon_number);		
					that.$set(that, "store_coupon_amount", parseFloat(res.data.order[that.couponIndex].order.coupon_price));
					that.$set(that, "plant_coupon_amount", parseFloat(res.data.total_platform_coupon_price));
					that.$set(that, "coupon_amount", that.plantCoupon ? that.plant_coupon_amount : that.store_coupon_amount);
					that.$set(that, 'couponData', res.data);
					that.$set(that, 'cartInfo', res.data.order);
					that.$set(that, 'total_platform_coupon_price', res.data.total_platform_coupon_price);
					that.$set(that, 'enabledPlatformCoupon', res.data.enabledPlatformCoupon);
					that.$set(that, 'platformCoupon', res.data.platformCoupon);
					that.$set(that, 'order_type', res.data.order_type);
					that.$set(that, 'coupon_price', res.data.order_coupon_price);
					that.$set(that, 'integral_count', res.data.order_total_integral);
					that.$set(that, 'integral_price', res.data.order_total_integral_price);
					that.$set(that, 'open_integral', res.data.openIntegral);
					that.$set(that, 'use_integral', res.data.useIntegral);
					that.$set(that, 'mer_order', res.data.order[0]);
					
				
					var  skuArr =  res.data.order[0].list;
					var cart = res.data.order[0].list[0];
					this.priceDate = res.data.order[0].list[0]['linePlan'];
					this.linePlanMeal = res.data.order[0].list[0]['linePlanMeal'];
					
				    
					that.passengerNum = cart.cart_num;
					that.cart = {
						cart_id: cart.cart_id,
						cart_num: cart.cart_num,
						adult_num: cart.adult_num,
						child_num: cart.child_num
					}
		
					that.stock = this.priceDate.stock;
					if(!this.priceDate || !this.linePlanMeal){
						return this.$util.Tips({
							title: '所选日期已暂停售卖'
						}, {
							tab: 3,
							url: 1
						});
					}
					
					this.checkSkuType()
	
					
					that.totalPrice = res.data.order_price
					that.orderStatus = res.data.status
					that.proPrice = res.data.total_price
					that.order_type = res.data.order_type
					that.order_model = res.data.order_model
					that.allow_address = res.data.allow_address
					that.order_key = res.data.key
					
					this.isLoading = false;
					that.showSkeleton = false;
					uni.hideLoading();
				}).catch(err => {
						this.isLoading = false;
						that.showSkeleton = false;
							uni.hideLoading();
					return this.$util.Tips({
						title: err
					}, {
						tab: 3,
						url: 1
					});
				});
			},
			
			getGoodsDetails: function() {
							
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				let that = this;
				getLinePlanDetail(that.line_plan_id).then(res => {
	
					var data = res.data;
					uni.hideLoading();
					let storeInfo = data.product;
					that.$set(that, 'storeInfo', storeInfo);
					that.$set(that, 'planInfo', data);
				    
					
					
					this.$refs.buyKnowRef.open()
					
					if(data.plan_type == 2){
						this.$refs.rollingRef.open()
					}
					if(data.plan_type == 3){
						this.$refs.bookingRef.open()
					}
					
					that.planInfo.lineStops.forEach(function(item,index){
						/***不默认选择上下车点*/
						if(index==0){
							that.on_stop_id = item.stop_id
							that.on_stop_name = item.stop.name
						}
						if(index==(that.planInfo.lineStops.length -1)){
							that.off_stop_id = item.stop_id
							that.off_stop_name = item.stop.name
						}
						if(item.stop_type==1){
							item.stop_name = item.stop.name
							that.on_stop_arr.push(item)
						}
						if(item.stop_type==2){
							item.stop_name = item.stop.name
							that.off_stop_arr.push(item)
						}
					})
					console.log('on_stop_arr',that.on_stop_arr)
								
					// that.busTitle = data.start_city+'-'+data.end_city;
					that.busTitle = data.product.store_name;
					
					uni.setNavigationBarTitle({
						title: that.busTitle
					})
					
					setTimeout(() => {
						this.showSkeleton = false
					}, 200)
					
				}).catch(err => {
					console.log('err',err)
					setTimeout(() => {
						this.showSkeleton = false
					}, 200)
					//状态异常返回上级页面
					return that.$util.Tips({
						title: err
					}, {
						tab: 3,
						url: 1
					});
				})
			},
			
			selctOnStop(e){
				this.on_stop_index = e.detail.value
				this.on_stop_id = this.on_stop_arr[e.detail.value].stop_id
				this.on_stop_name = this.on_stop_arr[e.detail.value].stop.name
			
			},
			selctOffStop(e){
				this.off_stop_index = e.detail.value
				this.off_stop_id = this.off_stop_arr[ e.detail.value].stop_id
				this.off_stop_name = this.off_stop_arr[ e.detail.value].stop.name
				
			},
			SubOrder: function(e) {
				if(this.isLoading) return;
				let that = this,
					data = {};
				if (!that.payType) return that.$util.Tips({
					title: '请选择支付方式'
				});
				var passNum = 0;			
				if(!this.adultList.length ){
					return that.$util.Tips({
						title: '请选择乘客信息'
					});
				}
				if(this.cart.child_num && !this.childList.length ){
					return that.$util.Tips({
						title: '请选择儿童乘客信息'
					});
				}
						
				passNum = (this.adultList.length?parseInt(this.adultList.length):0) + (this.childList.length?parseInt(this.childList.length):0)

				if(this.passengerNum > passNum){
					return that.$util.Tips({
						title: '还需要填写'+(this.passengerNum - passNum)+'个乘客消息'
					});
				}
				if(this.passengerNum < passNum){
					return that.$util.Tips({
						title: '请检乘客信息是否正确'
					});
				}
				if(this.totalPrice <=0){
					return that.$util.Tips({
						title: '支付金额不正确！'
					});
				}
				// if (that.order_type == 2 && !that.isAgree && that.cartInfo[0].list[0].productPresell.presell_type ==
				// 	2) {
				// 	return that.$util.Tips({
				// 		title: '请阅读并勾选协议，否则无法进行操作'
				// 	});
				// }
				if(this.passengerNum < 1){
					return that.$util.Tips({
						title: '至少选择一个产品资源购买'
					});
				}
				
				if (!(this.on_stop_id&&this.off_stop_id)) {
					return this.$util.Tips({title: '请先选择上下车点！'});
				} 
				
				data = {
					cart_id:  that.cartId.split(","),
					// address_id: this.addressId,
					on_stop_id: this.on_stop_id,
					off_stop_id: this.off_stop_id,
					on_stop_name: this.on_stop_name,
					off_stop_name: this.off_stop_name,
					adult_list: this.adultList,
					child_list: this.childList,
					select_day: this.selectDay,
					use_coupon: this.subCoupon,
					pay_type: this.payType,
					mark: this.msgObj,
					order_type: this.order_type, 
					key: this.order_key,
					takes: this.take,
					use_integral: this.use_integral,
					receipt_data: this.invoiceData,
					extend: this.extend,
					post: this.post,
					// #ifdef H5
					return_url: 'http://' + window.location.host + '/pages/users/order_list/index',
					// #endif
				};
				// if (data.mark && this.isEmojiCharacter(data.mark[Object.keys(data.mark)[0]])) {
				// 	that.$util.Tips({
				// 		title: '备注不允许输入表情！'
				// 	});
				// 	return;
				// }
				data.takes=[]
				// this.cartInfo.map(el => {
				// 	if (el.isTake == 1 || el.order.isTake) {
				// 		data.takes.push(el.mer_id)
				// 	}
				// })
				if (data.payType == 'balance' && parseFloat(that.userInfo.now_money) < parseFloat(that.totalPrice))
					return that.$util
						.Tips({
							title: '余额不足！'
						});
				uni.showLoading({
					title: '订单支付中',
					mask: true
				});			
				// #ifdef MP-WEIXIN
				openTourPaySuccessSubscribe().then(() => {
					that.payment(data);
				});
				// that.payment(data);
				// #endif
				// #ifndef MP-WEIXIN
				that.payment(data);
				// #endif
			},
			payment: function(data) {
				let that = this;
				tourCreateOrder(data).then(res => {
					uni.navigateTo({
						url: `/pages/users/order_payment/index?order_id=${res.data.order_id}&from_type=order`
					})
					uni.hideLoading();
					return
					let status = res.data.status,
						orderId = res.data.result.order_id,
						callback_key = res.data.result.pay_key,
						jsConfig = res.data.result.config,
						goPages = '/pages/order_pay_status/index?order_id=' + orderId + '&msg=' + res.message;
					that.orderPay = true;
					switch (status) {
						case 'ORDER_EXIST':
						case 'EXTEND_ORDER':
						case 'PAY_ERROR':
						case 'error':
							return that.$util.Tips({
								title: res.message
							}, {
								tab: 5,
								url: goPages
							});
							break;
						case 'success':
							return that.$util.Tips({
								title: res.message,
								icon: 'success'
							}, {
								tab: 5,
								url: goPages
							});
							break;
						case 'alipay':
						case "alipayQr":
							uni.navigateTo({
								url: '/pages/order_pay_back/index?keyCode=' + callback_key + '&url=' +
									jsConfig
							})
							return;
							break;
							// #ifndef MP
						case "wechat":
						case "weixin":
						case "weixinApp":
							jsConfig.timeStamp = jsConfig.timestamp;
							// #ifndef APP-PLUS
							this.$wechat.pay(jsConfig).then(res => {
								return that.$util.Tips({
									title: res.message,
									icon: 'success'
								}, {
									tab: 4,
									url: goPages
								});
							}).catch(res => {
								if (res.errMsg == 'chooseWXPay:cancel') return that.$util.Tips({
									title: '取消支付'
								}, {
									tab: 5,
									url: goPages + '&status=0'
								});
							})
							// #endif
							// #ifdef APP-PLUS
							let mp_pay_name=''
							if(uni.requestOrderPayment){
								mp_pay_name='requestOrderPayment'
							}else{
								mp_pay_name='requestPayment'
							}
							uni[mp_pay_name]({
								provider: 'wxpay',
								orderInfo: jsConfig,
								success: (e) => {
									let url = '/pages/order_pay_status/index?order_id=' + orderId +
										'&msg=支付成功';
									return that.$util.Tips({
										title: '支付成功',
										icon: 'success'
									}, {
										tab: 4,
										url: url
									});
								},
								fail: (e) => {
									let url = '/pages/order_pay_status/index?order_id=' + orderId + '&msg=取消支付';
									return that.$util.Tips({
										title: '取消支付',
									}, {
										tab: 4,
										url: url
									});
								},
								complete: () => {
									let url = '/pages/order_pay_status/index?order_id=' + orderId + '&msg=取消支付';
									return that.$util.Tips({
										title: '',
									}, {
										tab: 4,
										url: url
									});
								},
							});
							// #endif
							break;
							// #endif
							// #ifdef MP
						case "routine":
							jsConfig.timeStamp = jsConfig.timestamp;
							that.toPay = true;
							let mp_pay_name=''
							if(uni.requestOrderPayment){
								mp_pay_name='requestOrderPayment'
							}else{
								mp_pay_name='requestPayment'
							}
							uni[mp_pay_name]({
								...jsConfig,
								success: function(res) {
									uni.hideLoading();
									return that.$util.Tips({
										title: '支付成功',
										icon: 'success'
									}, {
										tab: 5,
										url: goPages
									});
								},
								fail: function(e) {
									let pages = '/pages/order_pay_status/index?order_id=' +
										orderId + '&msg=取消支付'
									return that.$util.Tips({
										title: '取消支付'
									}, {
										tab: 5,
										url: pages + '&status=0'
									});
								},
							})
							break;
							// #endif
						case "balance":
							//余额
							return that.$util.Tips({
								title: res.message
							}, {
								tab: 5,
								url: goPages + '&status=1'
							});
							break;
							// #ifdef H5
						case 'h5':
							let host = window.location.protocol + "//" + window.location.host;
							let url = `${host}/pages/order_pay_status/index?order_id=${orderId}&msg=${res.message}`
							let eUrl = encodeURIComponent(url)
							let jsurl = jsConfig.mweb_url || jsConfig.h5_url
							let locations = `${jsurl}&redirect_url=${eUrl}`
							setTimeout(() => {
								location.href = locations;
							}, 100);
							break;
							// #endif
							// #ifdef APP-PLUS
						case 'alipayApp':
							uni.requestPayment({
								provider: 'alipay',
								orderInfo: jsConfig,
								success: (e) => {
									return that.$util.Tips({
										title: '支付成功',
										icon: 'success'
									}, {
										tab: 5,
										url: goPages
									});
								},
								fail: (e) => {
									let pages = '/pages/order_pay_status/index?order_id=' +
										orderId + '&msg=支付失败'
									return that.$util.Tips({
										title: '支付失败'
									}, {
										tab: 5,
										url: pages
									});
								},
								complete: () => {
									uni.hideLoading();
									let pages = '/pages/order_pay_status/index?order_id=' +
										orderId + '&msg=取消支付'
									return that.$util.Tips({
										title: ''
									}, {
										tab: 5,
										url: pages
									});
								},
							});
							break;
							// #endif
						default: 
							let pages = '/pages/order_pay_status/index?order_id=' +
								orderId + '&msg=取消支付'
							return that.$util.Tips({
								title: '取消支付'
							}, {
								tab: 5,
								url: pages + '&status=0'
							});
					}
				}).catch(err => {
					uni.hideLoading();
					return that.$util.Tips({
						title: err
					});
				});
			},
			isEmojiCharacter: function(substring) {
				if (substring) {
					for (var i = 0; i < substring.length; i++) {
						var hs = substring.charCodeAt(i);
						if (0xd800 <= hs && hs <= 0xdbff) {
							if (substring.length > 1) {
								var ls = substring.charCodeAt(i + 1);
								var uc = ((hs - 0xd800) * 0x400) + (ls - 0xdc00) + 0x10000;
								if (0x1d000 <= uc && uc <= 0x1f77f) {
									return true;
								}
							}
						} else if (substring.length > 1) {
							var ls = substring.charCodeAt(i + 1);
							if (ls == 0x20e3) {
								return true;
							}
						} else {
							if (0x2100 <= hs && hs <= 0x27ff) {
								return true;
							} else if (0x2B05 <= hs && hs <= 0x2b07) {
								return true;
							} else if (0x2934 <= hs && hs <= 0x2935) {
								return true;
							} else if (0x3297 <= hs && hs <= 0x3299) {
								return true;
							} else if (hs == 0xa9 || hs == 0xae || hs == 0x303d || hs == 0x3030 ||
								hs == 0x2b55 || hs == 0x2b1c || hs == 0x2b1b ||
								hs == 0x2b50) {
								return true;
							}
						}
					}
				}
			},
			
			checkSkuType(){
				
				if(this.cart.adult_num&&!this.cart.child_num){
					this.skuType = 1
				} else if(this.cart.adult_num&&this.cart.child_num) {
					this.skuType = 2
				}
			},
			
			
			selectPaShow(index,item){
		
				var that = this;

				that.passengerList.forEach(function(res,indexe) {
					that.passengerList[indexe].check = false
				})
		
				if(index == 1){
					this.skuPaNum = this.cart.adult_num;
				} else if(index == 2){
					this.skuPaNum = this.cart.child_num;
				}
				this.selectList = item;
				this.skuIndex = index;
				this.showSelectPassenger = true;
				
			},
			

			
			closeAddPassenger(){
				this.showAddPassenger = false;
				this.initPassengerList();
			},
			ChangCouponsClose: function() {
				this.$set(this.coupon, 'status', false);
			},
			goBack: function() {
				uni.navigateBack();
			},
			/*获取优惠券说明*/
			getCouponAgreement() {
				let that = this
				that.showProtocol = true;
				that.agrementTtile = '优惠券说明'
				getAgreementApi('sys_coupon_agree').then(res => {
					that.protocol = res.data.sys_coupon_agree
				})
			},
			getCoupon(coupon) {
				if (coupon.checked) {
					this.subCoupon[coupon.mer_id].forEach((item, i) => {
						if (coupon.coupon_user_id == item) {
							this.subCoupon[coupon.mer_id].splice(i, 1)
						}
					})
				} else {
					this.subCoupon[coupon.mer_id].push(coupon.coupon_user_id)
				}
				this.getConfirm()
			},
			
			initPassengerList(){
				let that = this
				getPassengerList().then(res => {
					that.passengerList = res.data
					var data = res.data;
					if(data.length){
						that.passengerList.forEach(function(res,index) {
							that.passengerList[index].check = false
						});
						 that.passengerTemp = JSON.parse(JSON.stringify(that.passengerList))
					
					}
				
				})
			},
			delectPassenger(skuIndex,paIndex){
				if(skuIndex == 1){
					this.adultList.splice(paIndex,1)
				} else if(skuIndex == 2){
					this.childList.splice(paIndex,1)
				}
				this.changeSkuOnePass()
				this.flag++
				
			},
		
			editPassenger(item){
				if(this.isLoading) return;
				this.passenger = item;
				this.showAddPassenger = true;
				this.flag++ 
			},
			
			editPa(item){
				if(this.isLoading) return;
				this.passenger = item;
				this.showAddPassenger = true;
				this.flag++ 
			},
			
			addPa(){
				if(this.isLoading) return;
				this.showSelectPassenger = false;
				this.showAddPassenger = true;
				this.flag++ 
			},

			changePassenger(data,skuIndex){
				if(this.isLoading) return;
			
				var that =this;
				if(skuIndex == 1){
					this.adultList = data;
				} else if(skuIndex == 2){
					this.childList = data;
				}
				 for (var i = 0; i <this.passengerList.length; i++ ) {
					this.passengerList[i].check = false;
				 }
				 if(skuIndex == 1){
					 this.changeSkuOnePass();
				 }
				 this.showSelectPassenger = false;
				 this.flag++ 
					
			},
			selectPassengerHandel:function(index,isCheck){
			
				if(this.isLoading) return;
				// 如果只有一位乘客
				if(this.passengerNum == 1){
					for(var i =0; i < this.passengerTemp.length; i++){
						if(index == i){
							 this.passengerTemp[i].check = true;
						}else{
							this.passengerTemp[i].check = false;
						}
					}
				} else {
					var passNum = 0;
					this.passengerTemp.forEach(function(res){
						if(res.check==true){
							passNum++
						}
					})
					if(passNum == this.passengerNum && isCheck == false){
						return this.$util.Tips({title: "您只需选择"+this.passengerNum+'位乘客'})
					}
					this.passengerTemp[index].check = !this.passengerTemp[index].check;
				}
				
				var paList = [];
				for(var i =0; i < this.passengerTemp.length; i++){
					if(this.passengerTemp[i].check == true){
						 paList.push(this.passengerTemp[i])
					}
				}
				this.adultList = paList;
				
				this.flag++ 
			
			},
			
		
		    changeSkuNum(num, index){
		    	
		    	if(index == 1){
		    		this.cart.adult_num = num;
		    	}
		    	if(index == 2){
		    		this.cart.child_num = num;
		    	}
		    	this.cart.cart_num = this.cart.adult_num + this.cart.child_num;
		    	if(this.cart.cart_num > this.priceDate.stock){
		    		if(index == 1){
		    			this.cart.adult_num--;
		    		}
		    		if(index == 2){
		    			this.cart.child_num--;
		    		}
		    		this.cart.cart_num--
		    		return this.$util.Tips({title: '库存不足'})
		    	}
		 
		    	this.changeCart();
		    	
		    },
		    watchAdultchange(){	
		    	if(this.cart.adult_num < this.adultList.length){
		    		var num =  this.adultList.length - this.cart.adult_num  ;
		
		    		var sub = 0;
		    		for (let j = this.adultList.length - 1;j >= 0; j--) {  
		    			if(sub == num) break;
		    		    sub++
		    		    this.adultList.splice(j,1);
		    		}
		    		this.changeSkuOnePass();
		    	}
		    },
		    watchChildchange(){
		
		    	if(this.cart.child_num < this.childList.length){
		    		var num =  this.childList.length - this.cart.child_num  ;
		
		    		var sub = 0;
		    		for (let j = this.childList.length - 1;j >= 0; j--) {  
		    			if(sub == num) break;
		    		    sub++
		    		    this.childList.splice(j,1);
		    		}
		    	}
		    },
		    changeSkuOnePass(){
		    	// 在弹窗选择乘客之后 在循环主页面passengerTemp 让其选中
		    	var that = this;
		    	for (var i = 0; i <this.passengerTemp.length; i++ ) {	
		    		const item = this.adultList.find(function(element) {
		    		  return that.passengerTemp[i].id == element.id;  
		    		});
		    		if(item != undefined){
		    			that.passengerTemp[i].check = true;
		    		} else {
		    			that.passengerTemp[i].check = false;
		    		}
		    	}
		    },
		    changeCart() {
		       if(this.isLoading) return;
		    	let that = this;
		    	tourCartChange({data: this.cart}).then(res => {
		    		that.getConfirm()
		    	}).catch(error => {
		    		// this.skuList[index].cart_num--
		    		
		    		that.$util.Tips({
		    			title: error
		    		});
		    		// that.getConfirm()
		    	})
		    },
		    openBuyDetail(){
				this.$refs.buyDetailRef.open()
			},
			closeBuyDetail(){
				this.$refs.buyDetailRef.close()
			},
			closeBooking(){
				this.$refs.bookingRef.close()
			},
			closeRolling(){
				this.$refs.rollingRef.close()
			},
			closeBuyKnow(){
				this.$refs.buyKnowRef.close()
			},
		    openLoc(){
				this.$refs.locRef.open()
			},
			locColse(){
				this.$refs.locRef.close()
			},
			lookStation:function(item){
				let that = this

				uni.showActionSheet({
					itemList: ['查看实景图','导航去这里'],
					success: function (res) {
						that.daClick(res.tapIndex,item)
					},
					fail: function (res) {
						
					}
				});
				
			
			},
			//导航
			daClick:function(e,item) {
				var that = this
				if(e==1){
					const arr = item.lng_lat.split(";");
					uni.openLocation({
						//​使用微信内置地图查看位置。
						latitude: parseFloat(arr[1]),
						longitude: parseFloat(arr[0]),
						name: item.name
					});
				} else {
					
				   item.pics&&item.pics.length?that.joinQun(item):that.$util.Tips({title: '该站点暂无站点图片'});
				}
			},
			
			
			joinQun:function(item){
				   // 预览图片
				
				   var that = this
				   
				   var 	urls = item.pics;
			
				   uni.previewImage({
					current: 0,   
				   	urls: urls,
					fail(err) {
						
					}
				   });
			},
			filterRefund(refundRate){
				// switch (refundRate.type) {
				// 	case 1:
				// 		return "使用前"+ (refundRate.refund_time?  refundRate.refund_time +'分钟（含）之前':'')
				// 	case 2:
				// 		return "使用前"+ (refundRate.refund_time?  refundRate.refund_time +'分钟之后':'');
			
				// }
				switch (refundRate.type) {
					case 1:
						return  "使用前"+ this.convertMinutesToTimeAgo(refundRate.refund_time)+'（含）之前'
					case 2:
						return  "使用前"+  this.convertMinutesToTimeAgo(refundRate.refund_time)+'之后';
				
				}
			},
		
			convertMinutesToTimeAgo(minutes) {
			  const days = Math.floor(minutes / (24 * 60));
			  const remainingMinutes = minutes % (24 * 60);
			  const hours = Math.floor(remainingMinutes / 60);
			  const minutesPart = remainingMinutes % 60;
			
			  let result = '';
			  if (days > 0) {
			    result += `${days}天前`;
			    if (hours > 0 || minutesPart > 0) {
			      result += `${hours.toString().padStart(2, '0')}:${minutesPart.toString().padStart(2, '0')}`;
			      if (hours === 0 && minutesPart === 0) {
			        result = result.slice(0, -1);
			      }
			    } else {
			      result = result.slice(0, -1);
			    }
			  } else if (hours > 0) {
			    result += `${hours}小时${minutesPart > 0? `${minutesPart}分钟` : ''}`;
			  } else {
			    result += `${minutesPart}分钟`;
			  }
			
			  return result;
			},
			
		    convertMinutesToHours(minutes) {
			  return (minutes / 60).toFixed(1);
			},
			addMinutesToTime(timeStr, minutesToAdd) {
			  const [hours, minutes] = timeStr.split(':').map(Number);
			  let totalMinutes = hours * 60 + minutes + minutesToAdd;
			  while (totalMinutes >= 24 * 60) {
			    totalMinutes -= 24 * 60;
			  }
			  const newHours = Math.floor(totalMinutes / 60);
			  const newMinutes = totalMinutes % 60;
			  return `${newHours.toString().padStart(2, '0')}:${newMinutes.toString().padStart(2, '0')}`;
			},
			changeNav(index){
				this.$set(this, 'navActive', index);
			},
			// 打开配送方式弹窗
			openDiscount(item, index) {
				this.isShowDiscount = !this.isShowDiscount;
			},
			closeDiscount() {
				this.isShowDiscount = false
			},
		
			couponTap: function(item, index) {
				this.coupon = item
				this.$set(this.coupon, 'status', true)
				this.couponIndex = index
				this.plantCoupon = false
				this.$set(this, "coupon_number",  this.store_coupon_number);
				this.$set(this, "coupon_amount",  this.store_coupon_amount);
				
			
			},

			couponTap2: function(item, index) {
				this.coupon = {
					coupon: item,
					mer_id: 0,
					status: true
				}
				this.plantCoupon = true
				this.$set(this, "coupon_number",  this.subCoupon['0'].length);
				this.$set(this, "coupon_amount",  this.plant_coupon_amount);
			
			},
			
			
			filterSkuName(skuName){
				if(skuName.includes('成人')){
					return '1.2米（含）以上';
				}
				if(skuName.includes('儿童')){
					return '1.2米（不含）以下';
				}
				if(skuName.includes('老人')){
					return '60周岁（含）以上';
				}
				return false;
			},
			formatNumber(num) {
			    // 将数字转换为字符串，并检查小数点后两位  
			    const strNum = Number(num).toFixed(2); // 这将总是返回两位小数，即使它们是0  
			    const decimalPart = strNum.split('.')[1]; // 获取小数点后的部分  
			  
			    // 如果小数点后两位是00，则去掉这两位小数  
			    if (decimalPart === '00') {  
			        return strNum.split('.')[0]; // 返回整数部分  
			    } else {  
			        return strNum; // 否则返回原始的两位小数形式  
			    }  
			},  
			
		
		}
	}
</script>

<style lang="scss" scoped>
	.sys-head .bg{
		// background-image: linear-gradient( 90deg, var(--view-bntColor21) 0%, var(--view-bntColor22) 100%);
		background-color: #fff;
	}
	.m_booking_content {
	    background-color: #eef1f6;
	    flex: 1;
	    overflow-x: hidden;
	    overflow-y: auto
	}
	

	
	.m_booking .m_mind_tour {
	    background-color: transparent;
	    padding: 12px 0 20px
	}
	
	.m_booking .m_sku_ctrip .m_calendar_extra_info {
	    padding: 0 12px 8px
	}
	
	.m_booking .m_sku_ctrip .m_sku_inner {
	    padding-bottom: 8px
	}
	
	.m_booking .m_sku_ctrip .m_sku_calender {
	    padding-bottom: 0
	}
	
	.m_booking .m_sku_ctrip .m_tab_calendar_wrapper {
	    padding: 16px 12px 0
	}
	
	.m_booking .m_sku_ctrip .m_select_quantity {
	    padding: 0 12px
	}
	
	.m_booking .m_sku_ctrip .m_select_quantity .m_select_quantity_limit {
	    padding-bottom: 0;
	    padding-top: 16px
	}
	
	.m_booking .m_sku_ctrip .m_select_quantity .m_select_quantity_more {
	    height: 34px;
	    padding-top: 8px
	}
	
	.m_booking .m_sku_ctrip .m_valid_component {
	    padding-bottom: 0
	}
	
	.m_booking_mini .m_booking_content_blue {
	    padding-top: 8px
	}
	
	.m_booking_minix .m_footer {
	    padding-bottom: 16px
	}
	
	.m_booking .m_booking_clause_wrapper {
	    padding-top: 8px
	}
	
	.m_booking_peace_poplayer .m_poplayer_content_container {
	    background-color: #fff;
	    border-top-left-radius: 8px;
	    border-top-right-radius: 8px;
	    position: absolute
	}
	
	.m_booking_peace_poplayer .m_poplayer_content_container .m_poplayer_content_childs_scroll {
	    align-items: stretch;
	    display: flex;
	    flex: 1
	}
	
	.m_booking_peace_poplayer .m_poplayer_header {
	    border-top-left-radius: 8px;
	    border-top-right-radius: 8px
	}
	
	.m_booking_peace_poplayer .u_icon_iconCancel {
	    font-size: 24px
	}
	
	.m_booking_content .m_booking_content_inner {
	    background: #fff;
	    border-radius: 0 0 8px 8px;
	    // margin: 0 8px
	}
	.m_reservation_wrapper {
	    background-color: #fff;
	    // border-radius: 8px;
	    padding: 16px 12px;
	}
	.m_booking_content .m_booking_content_inner .m_reservation_terms_breathe,.m_booking_content .m_booking_content_inner .m_sku_breathe {
	    padding: 0 12px
	}
	
	.m_booking_content .m_booking_content_inner .m_reservation_terms_breathe {
	    padding-top: 16px
	}
	
	.m_booking_content .m_booking_content_inner .m_sku_breathe {
	    padding-bottom: 16px
	}
	
	.m_booking_content .m_booking_content_inner .m_sku_ctrip.m_sku_book .m_sku_content {
	    margin: 0
	}
	
	.m_booking_content .m_booking_content_inner .m_sku_ctrip.m_sku_book .m_sku_dot.left {
	    left: -6px
	}
	
	.m_booking_content .m_booking_content_inner .m_sku_ctrip.m_sku_book .m_sku_dot.right {
	    right: -6px
	}
	
	.m_reservation_title {
	    color: #333;
	    font-size: 18px;
	    font-weight: 700;
	    line-height: 24px
	}
	
	.m_reservation_title.bottom {
	    margin-bottom: 8px
	}
	
	.m_sku_ctrip.m_sku_book {
	    background: 0 0;
	    padding-bottom: 0;
	    position: relative
	}
	
	.m_sku_ctrip.m_sku_book .m_sku_content {
	    background: #fff;
	    border-radius: 8px;
	    // border-top: 1px dashed #ddd;
	    margin: 0 8px;
	    overflow: hidden
	}
	
	.m_sku_ctrip.m_sku_book .m_sku_dot {
	     
		background-image: linear-gradient( 90deg, var(--view-bntColor21) 0%, var(--view-bntColor22) 100%);
	    border-radius: 9px;
	    height: 12px;
	    position: absolute;
	    top: -6px;
	    width: 12px;
	    z-index: 2
	}
	
	.m_sku_ctrip.m_sku_book .m_sku_dot.left {
	    left: 2px
	}
	
	.m_sku_ctrip.m_sku_book .m_sku_dot.right {
	    right: 2px
	}
	.m_select_quantity_limit {
	    align-items: center;
	    display: flex;
	    flex-wrap: wrap;
	    padding-right: 16px;
		padding-bottom: 0;
		padding-top: 16px;
	}
	.source_content{
		 justify-content: flex-start;
		line-height: 24px;
	}
	.choice_options_wrapper{
		align-items: flex-end;
	}
	.no-active{
		// width: 25%;
		height: 35px;
		border-radius: 5px;
		border: 1px solid #e5e5e5;
		// margin: 0 15px 10px 0;
		text-align: center;
		line-height: 35px;
		position: relative;
	}
	.in-active{
		// width: 25%;
		height: 35px;
		border-radius: 5px;
		border: 1px solid #0c79ff;
		// margin: 0 15px 10px 0;
		text-align: center;
		line-height: 35px;
		position: relative;
	}
	.gou {
		position: absolute;
		float: right;
		right: 0;
		background-color: #0c79ff;
		width: 15px;
		height: 10px;
		line-height: 10px;
		bottom: 0;
		border-bottom-right-radius: 3px;
		border-top-left-radius: 5px;
	}

	.bgw {
		font-size: 30rpx;
		color: #282828;
		line-height: 90rpx;
		background: #fff;
		padding: 0 10px;
	}
    .bgw .money {
		color: #999999;
		display: flex;
		align-items: center;
	}
	.bgw .discount .iconfont {
		color: #515151;
		font-size: 30rpx;
		margin-left: 12rpx;
	}
	.footer {
		width: 100%;
		height: 100rpx;
		height: calc(120rpx + constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
		height: calc(120rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
		background-color: #fff;
		padding: 0 30rpx;
		font-size: 28rpx;
		color: #333;
		box-sizing: border-box;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 30;
		.footer_count{
			font-size: 28rpx;
			>view {
				align-items: baseline;
			}
			.pColor {
				margin-left: 12rpx;
			}
		}
		.coupon_price{
			color: #999999;
			font-size: 22rpx;
			margin-top: 10rpx;
			text{
				color: #666666;
				background: #F5F5F5;
				border-radius: 26rpx;
				margin-left: 20rpx;
				height: 34rpx;
				line-height: 34rpx;
				display: inline-block;
				width: 104rpx;
				text-align: center;
				font-size: 18rpx;
			}
		}
	}
	.pColor{
		color: var(--view-priceColor);
	}
	.footer .settlement {
		font-size: 30rpx;
		color: #fff;
		width: 200rpx;
		height: 72rpx;
		background-color: var(--view-priceColor);
		border-radius: 60rpx;
		text-align: center;
		line-height: 72rpx;
		font-size: 26rpx;
		&.disabled {
			background-color: #cccccc;
		}
	}
	
	.bus-detail-header .header-row {
	    display: flex;
	    flex-direction: row;
	    align-items: center
	}
	
	.bus-detail-header .info-line {
	    line-height: 30px;
	    padding-right: 15px
	}
	.bus-detail-header .info-line .info-tag {
	    top: 0;
	    height: 22px;
	    line-height: 22px;
	    background-color: #99afca;
	    color: #fff;
	    padding-left: 15px;
	    padding-right: 10px;
	    position: relative;
	    margin-right: 15px;
	}
	.bus-detail-header .info-line .info-tag:after {
	    content: "";
	    position: absolute;
	    left: 100%;
	    top: 0;
	    height: 0;
	    width: 0;
	    border-radius: 0 3px 0 0;
	    border-color: #99afca transparent transparent #99afca;
	    border-style: solid;
	    border-width: 11px 4px
	}
	.bus-detail-header .header-section {
	    padding: 5px 15px 0 8px;
	}
	.bus-detail-header .station-row {
	    font-weight: 500;
	    position: relative;
	}
	.bus-detail-header .dot {
	    height: 6px;
	    width: 6px;
	    border-radius: 50%;
	    background-color: #00b87a;
	    margin: 11px
	}
	.bus-detail-header .station-row .dot:after {
	    position: absolute;
	    content: "";
	    width: 4px;
	    background-color: #f4f4f4;
	    left: 12px;
	    top: calc(50% + 6px);
	    bottom: 0;
	    z-index: 0;
	    overflow: visible;
	}
	.bus-detail-header .station-row .dot.arr:after {
	    top: 0;
	    bottom: calc(50% + 6px);
	}
	.bus-detail-header .dot.arr {
	    background-color: #f5190a
	}
	.bus-detail-header .station-row .time {
	    font-size: 15px;
	    font-weight: 600;
	    text-align: left;
	    width: 54px;
	    flex-shrink: 0
	}
	.bus-detail-header .station-row .station-text {
	    font-size: 12px;
	    color: #999;
	}
	.bus-detail-header .header-section .show-station-btn {
	    color: #5678a8;
	    display: flex;
	    flex-direction: column;
	    align-items: center;
	    justify-content: center;
	    font-size: 12px;
	    user-select: none;
	}
	.bus-kn {
		margin: 0 10px 10px 10px;
		border-radius: 8px;
	}
	.bg-w{
		z-index: -1;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 700px;
		background: -webkit-linear-gradient(180deg, #e2fff4 0, #eef1f6);
		background: -o-linear-gradient(to bottom, #e2fff4 0, #eef1f6 100%);
		background: -moz-linear-gradient(to bottom, #e2fff4 0, #eef1f6 100%);
		background: linear-gradient(180deg, #e2fff4 0, #eef1f6);
		background: -webkit-linear-gradient(180deg, #dff1ff 0, #eef1f6);
		background: -o-linear-gradient(to bottom, #dff1ff 0, #eef1f6 100%);
		background: -moz-linear-gradient(to bottom, #dff1ff 0, #eef1f6 100%);
		background: linear-gradient(180deg, #dff1ff 0, #eef1f6);
		background-size: 100% 700px;
		background-repeat: no-repeat;
	}
	.bus-detail-header .rule-line {
	    max-height: 100px;
	    font-size: 12px;
	    display: flex;
	    justify-content: space-between;
	    align-items: flex-start;
	    padding: 4px 0;
	    // border-top: 1px dashed #f4f4f4
	}

	
	.bus-detail-header .rule-line .rule-list {
	    color: #666;
	    overflow: hidden;
	    text-overflow: ellipsis;
	    display: flex;
	    flex: 1;
	    flex-wrap: wrap;
	    max-height: 34px
	}
	
	.bus-detail-header .rule-line .rule-list .rule-item:after {
	    margin: 0 4px;
	    height: 12px;
	    content: "";
	    border-right: 1px solid #999;
	    display: inline-block;
	    vertical-align: 0
	}
	
	.bus-detail-header .rule-line .rule-list .rule-item:last-child:after {
	    display: none
	}
	
	.bus-detail-header .rule-line .product-desc {
	    color: #5678a8;
	    min-width: 24px
	}

	.locpop .dot {
	    height: 6px;
	    width: 6px;
	    border-radius: 50%;
	    margin: 11px
	}
	.in-desc-header-container {
	    background: #fff;
	    border-radius: 6px;
	    border: 1px solid #ddd;
	    margin: 16px 0;
	    overflow: hidden;
	}
	.tag-title {
	    color: #333;
	    font-size: 17px;
	    padding: 8px 0 3px;
	    font-weight: 800;
	    line-height: 20px;
	}
	 .tag-content {
	    color: #333;
	    font-size: 14px;
	    line-height: 25px;
	}
	
	.mini-buy-button{
		border-radius: 10px;
		height: 40px;
		line-height: 40px;
		color: #FFFFFF;
		margin: 10px;
		background-color: var(--view-theme);
		text-align: center;
		width: 150px;
		font-size: 16px;
	}
	.dot-unipop{
		height: 6px;
		width: 6px;
		border-radius: 50%;
		margin: 11px
	}
	
	.shu-fg {
		border-left: 1px solid  #a7a7a7;
		height: 15px;
	}
	
	.station_dot {
	    width: 6px;
	    height: 6px;
	    border-radius: 50%;
	    margin: 0 30rpx;
	}
	
	.station_dot_start {
	    background-color:#00b87a;
	}
	
	.station_dot_end {
	    background-color: #f5190a;
	}
	.separation-line {
	    height: 1rpx;
	    background-color: rgb(229,229,229);
	}
	.item-txtarea{
		background-color: #fff;
		padding: 10px;
		margin-top: 10px;
		textarea{
			display: block;
			width: 95%;
			height: 100rpx;
			font-size: 30rpx;
			background: #f7f7f7;
			border-radius: 5px;
			padding: 10px;
			margin-top: 5px;
			
		}
		.coarea{
			color: #ccc;
		}
	}
</style>